<template>
    <div class="container">
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
      <footer>
        <mt-tabbar v-model="selected">
          <mt-tab-item id="home">
            <img slot="icon" src="@/assets/icon/user.png">
            首页
          </mt-tab-item>
          <mt-tab-item id="classification">
            <img slot="icon" src="@/assets/icon/user.png">
            分类
          </mt-tab-item>
          <mt-tab-item id="shop">
            <img slot="icon" src="@/assets/icon/user.png">
            购物车
          </mt-tab-item>
          <mt-tab-item id="user">
            <img slot="icon" src="@/assets/icon/user.png">
            我的
          </mt-tab-item>
        </mt-tabbar>
      </footer>
    </div>
</template>
<script>
export default {
  name: "Main",
  data() {
    return {
      selected: "",
      transitionName:'slide-left'
    };
  },
  mounted() {
    let localData = window.localStorage.getItem("navTabIndex");
    this.selected = localData ? localData : "home";
  },
  watch: {
    selected: function(val) {
      this.$router.push(val)
      window.localStorage.setItem("navTabIndex", val);
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .tabs {
    position: absolute;
    bottom: 0;
  }
}
footer{
  position: fixed;
  bottom: 0;
  left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
</style>
<style>
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>


